<template>
  <div class="particular">
    <div class="particular-img">
      <img src="../images/canping1.jpg" alt="" />
    </div>
    <div class="product">
      <div class="title">￥(绿毒刀) 你买不了吃亏，买不了上当！</div>
      <div class="shopping">
        <span class="money">￥5888元</span>
        <span class="money">/套</span>
        <span class="welfare">赠送一年维护费</span>
      </div>
    </div>

    <div class="explain">
      <div class="explain-ct">
        <ul class="tab-box">
            <li v-for="tab in tabs" :class="{'main-color-border': tabName === tab.en}"
            @touchEnd="clickTab(tab.en)">
              <span>{{tab.cn}}</span>
            </li>
        </ul>
      </div>
      <!-- <div class="explain-ags">
        <div class="explain-border"  @click="parameters($event)">产品参数</div>
      </div> -->
    </div>
    <div class="bg"></div>

    <div class="product-explain" v-show="tabName === 'info'">
      他是最传奇的反派人物。他是天灾军团的统驭者，是魔剑霜之哀伤的持有者，是艾泽拉斯所有自由百姓的公敌。
      他就是巫妖王。他的力量难以估计，他的邪恶深不可测。而他冷如冰雪的灵魂只有一个目的，那就是消灭所有的生命，以亡灵大军征服……
      然而事情并非向来如此。在他的灵魂与兽人萨满耐奥祖结合之前，巫妖王的原本身分其实是阿尔萨斯‧米奈希尔；他是洛丹伦的王子，
      <img src="../images/canping5.jpg" alt="" />
      也是白银之手骑士团的圣骑士。可是当天灾瘟疫威胁到他所珍爱的一切事物时，他被迫踏上不幸的旅程，去追寻一把威力足以拯救家园的符文剑。
      但是，他也因此付出了惨痛的代价，并且开始踏上无尽堕落的不归路。最后，阿尔萨斯的旅程引领他来到位于极北荒原的寒冰王座，
      面对最为深沉黑暗的命运终局。《阿尔萨斯：巫妖王的崛起》，从阿尔萨斯少年时代直到他走上冰封王座成为巫妖王的十八年历程，
      <img src="../images/picture.png" alt="" />
      剧情跨度涵盖第二次战争(Warcraft2)和第三次战争(Warcraft3)。为我们展现巫妖王这一魔兽玩家耳熟能详的BOSS，
      从受圣光庇佑的洛丹伦王子转变为天灾军团统领的漫漫长路。
    </div>

    <div class="product-argument" v-show="tabName === 'dynamic'">
      <div class="">
        <div class="list">
          <span class="list-left">机顶盒型号：</span>
          <span class="list-right">轻巧携带便捷（绿毒刀）/套</span>
        </div>
      </div>
      <div class="list-state">
        霜之哀伤是阿尔塞斯手中利器，死亡骑士的代表之剑，
        <img src="../images/canping6.jpg" alt="" />
        如同其名字，这是一把带着邪恶的强大力量，却又带着哀伤的悲剧色彩的神器。
      </div>
    </div>
  </div>

  <div class="bg-lucency" v-show="bgLucencyShow"></div>

  <div class="buy-select" v-show="buySelectShow">
    <div class="select-title">
      <div class="titleImg">
        <img src="../images/canping1.jpg" alt="" />
      </div>
      <div class="titleFont">
        <span>￥568000/套</span>
        <p class="fontStyle">机顶盒型号：XS-14598邪恶的强大力量，却又带着哀伤的悲剧色彩的神器</p>
        <img src="../images/icon_no.png" @click="onlyClose" />
      </div>
    </div>
    <div class="title-money">
      <span>机顶盒</span>
      <span>机顶个人的观点个盒</span>
      <span>机顶盒</span>
      <span>分盒</span>
      <span>机顶盒</span>
      <span>机顶粉色分盒</span>
      <span>机顶粉色分盒</span>
      <span>师父</span>
      <span>机顶粉色粉色分盒</span>
    </div>
  </div>


  <div class="payment" @click="paying">
    <div class="payment-bt">
      <button type="button"><span>立即购买</span></button>
    </div>
  </div>
  <toast v-show="loading" :type="'loading'">加载中</toast>
  <dialog v-show="dialog" :title="'错误提示'" :type="" @weui-dialog-confirm="dialog=false">
    <p>加载失败，请重试</p>
  </dialog>
</template>
<script>
  import {Toast, Dialog} from "vue-weui";
  import {AJAX} from "../methods/query.js";
  export default {
    // props: {
    //   helpNotes: {
    //     type: Object,
    //     default() {
    //       return {
    //         helpTitle: "",
    //         helpContent: ""
    //       }
    //     }
    //   }
    // },
    data() {
      return {
        loading: false,
        dialog: false,
        explainShow: false,
        buySelectShow: false,
        bgLucencyShow: false,
        product: [],
        detail: {},
        tabName: '',
        tabs: [{
          en: 'info',
          cn: '产品详情'
        }, {
          en: 'dynamic',
          cn: '产品参数'
        }]
      };
    },
    methods: {
      clickTab(name) {
        console.info(name);
        this.tabName = name;
      },
      paying() {
        this.buySelectShow = true;
        this.bgLucencyShow = true;
      },
      onlyClose() {
        this.buySelectShow = false;
        this.bgLucencyShow = false;
      },
      particular(e) {
        let $event = e.target;
        if ($event.classList.contains('blue')) {
          $event.classList.remove('blue');
          this.explainShow = false;
        } else {
          $event.classList.add('blue');
          this.explainShow = true;
        }
      }
    },
    async ready() {
      this.clickTab('info');
      // let productSetMeal = await AJAX.productSetMeal(this.id);
      // console.log(productSetMeal);
      //
      // let getGoodsInfo = await AJAX.getGoodsInfo(this.id);
      // console.log(getGoodsInfo.Text);
      // this.detail = {
      //   explain: getGoodsInfo.Text
      // };
      // let accountUser = await AJAX.accountUser();
      // console.log(accountUser);
    },
    components: {
      Toast,
      Dialog
    }
  };
</script>
<style scoped lang="less">
  .particular{
    font-size: .6rem;
    color:#404040;
    background-color: #fff;
    .particular-img{
      max-width: 100%;
      img{
        width: 100%;
        height: auto;
      }
    }
    .product{
      padding:0 .5rem 0 .5rem;
      font-size: .7rem;
      clear: both;
      .title{
      }
      .shopping{
        line-height: 1.6rem;
        .money{
          color:#15A2D7;
        }
        .welfare{
          font-size: .5rem;
          color: #BFBFBF;
        }
      }
    }

    .explain{
      .tab-box {
        display: flex;
        border:1px solid #EBEBEB;
        justify-content: space-around;
        padding: .3rem 0;
        li {
          font-size: .7rem;
          text-align: center;
          width: 49.99%;
          border-bottom: 1px solid #EBEBEB;
          padding: .3rem 0;
          span {
            border-right: 1px solid #EBEBEB;
            display: block;
          }
        }
        li:first-child {
          span {
            border-left: 0px none;
          }
        }
        li.main-color-border {
          border-bottom:3px solid #15A1D6;
          // border-bottom-color: #15A1D6;
          color:#404040;
        }
      }
    }

    .bg{
      background-color: #EBEBEB;
      height:.3rem;
    }

    .product-explain{
      padding: .3rem .5rem .3rem .5rem;
      margin-bottom: 4.2rem;
      img{
        max-width: 100%;
        height: auto;
      }
    }

    .product-argument{
      margin-bottom: 4.2rem;
      font-size: .5rem;
      .list{
        clear: both;
        .list-left{
          float:left;
          width: 30%;
          padding-left: .5rem;
        }
        .list-right{
          float: right;
          padding-right: .5rem;
          width: 69%;
          text-align: right;
        }
      }
      .list-state{
        padding: .3rem .3rem .5rem .5rem;
        clear: both;
        img{
          max-width: 100%;
          height: auto;
        }
      }
    }
  }

  .bg-lucency{
    position: absolute;
    background-color: #000;
    width:100%;
    height:100%;
    top:0;
    right: 0;
    opacity: .5;
  }

  .buy-select{
    position: fixed;
    width: 100%;
    bottom: 2.8rem;
    background-color: #fff;
    .select-title{
      text-align: left;
      line-height: 1.2rem;
      font-size: .6rem;
      padding:.3rem 0;
      .titleImg{
        width:30%;
        height:4.5rem;
        margin: -1rem .3rem 0 .5rem;
        border-radius: .2rem;
        float:left;
        background-color: #fff;
        img{
          width:100%;
          height:100%;
          padding:.3rem;
        }
      }
      .titleFont{
        float:left;
        width:60%;
        height:4.3rem;
        font-size: .6rem;
        color:#404040;
        .fontStyle{
          overflow : hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        span{
          color:#15A1D6;
        }
        img{
          position: absolute;
          top:.3rem;
          right:.3rem;
          width:1rem;
          height:1rem;
        }
      }
    }
    .title-money{
      padding-top: .5rem;
      margin: 0 .3rem;
      clear: both;
      font-size: .5rem;
      span{
        display: inline-block;
        border:1px solid #15A1D6;
        border-radius: .3rem;
        margin-left: .5rem;
        margin-bottom: .5rem;
        padding:.3rem .5rem;
        color:#15A1D6;
      }
    }
  }

  .payment{
    position: fixed;
    bottom: 0;
    width:100%;
    height:3rem;
    background-color: #fff;
    .payment-bt button{
      position: fixed;
      bottom: 0;
      padding: .5rem 0;
      width:90%;
      margin-left:5%;
      margin-bottom: .5rem;
      border-radius: .3rem;
      background-color: #15A1D6;
      text-align: center;
      color:#fff;
    }
  }
</style>
